<template>
  <div class="app-container">
    <el-row class="roleInputRow">
      <el-col :span="18">
        <div id="Deli" style="width: 1100px; height: 350px"></div>
        <div id="scatter" style="width: 1100px; height: 350px"></div>
      </el-col>

      <el-form
        ref="requestForm"
        :inline="false"
        class="right-condition"
        :model="requestForm"
        label-width="120px"
      >
        <el-col :span="6">
          <el-form-item label="请选择设备:">
            <el-select
              v-model="selected"
              style="width: 220px"
              @change="getTraceData($event)"
            >
              <el-option
                v-for="item in list"
                :key="item.id"
                :label="item.imei + item.create_dt"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="起始频率:" prop="startUnit">
            <el-input
              v-model="formItem.startUnit"
              type="text"
              placeholder=""
              style="width: 220px"
            >
              <i slot="suffix" style="font-style: normal; margin-right: 10px">
                /{{ freqUnit }}
              </i>
            </el-input>
          </el-form-item>

          <el-form-item label="终止频率:" prop="endUnit">
            <el-input
              v-model="formItem.endUnit"
              type="text"
              placeholder=""
              style="width: 220px"
            >
              <i slot="suffix" style="font-style: normal; margin-right: 10px">
                /{{ freqUnit }}
              </i>
            </el-input>
          </el-form-item>

          <el-form-item label="步进:" prop="step">
            <el-select v-model="formItem.step" style="width: 220px">
              <el-option
                v-for="item in stepList"
                :key="item.id"
                :label="item.val"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>

<script>
import axios from 'axios'
// import * as Echarts from 'echarts/lib/echarts'

export default {
  name: 'Deli',
  data: () => {
    return {
      requestForm: {},
      formItem: {
        startUnit: '',
        endUnit: '',
        step: '',
      },
      selected: '',
      list: [],
      stepList: [
        {
          id: 25,
          val: '25kHz',
        },
        {
          id: 50,
          val: '50kHz',
        },
        {
          id: 100,
          val: '100kHz',
        },
      ],
      freqUnit: 'Mhz',
      orgOptions: {},
      scatterOptions: {},
    }
  },
  mounted () {
    axios.get('http://47.118.20.181:8080/deli/devices').then(
      function (response) {
        //console.log(JSON.stringify(response))
        this.list = response.data.data
        this.selected = this.list[0].id
        this.getTraceData(this.selected)
      }.bind(this)
    )
  },
  methods: {
    getTraceData: function (deviceId) {
      let dom = document.getElementById('Deli')
      let myChart = this.$echarts.init(dom)
      myChart.showLoading({
        text: '加载中...请稍后',
        color: '#47B485',
        textColor: '#000',
        maskColor: 'rgba(255, 255, 255, 0.8)',
        zlevel: 0
      })
      axios
        .get('http://47.118.20.181:8080/deli/records?device_id=' + deviceId)
        .then(
          function (response) {
            console.log(JSON.stringify(response.data.data))
            if (response.data.status == 'success') {
              if (response.data.data.length == 0) {
                const dom = document.getElementById('Deli')
                dom.innerHTML = '该设备暂无数据'
                dom.removeAttribute('_echarts_instance_')
                return
              }
              let [x, y, remarks] = onRecords(response.data.data[0])
              // eslint-disable-next-line no-unused-vars
              let { frequency, span, unit, ref, mr } = remarks
              this.orgOptions = {
                title: {
                  text: '德力场强仪',
                  left: 'center',
                },
                // backgroundColor: 'black',
                // darkMode: true,
                tooltip: {
                  trigger: 'axis',
                },
                legend: {
                  show: true,
                  data: ['场强'],
                  left: 'left',
                  formatter: function (name) {
                    return name + '(' + unit + ')'
                  },
                },
                xAxis: {
                  data: x,
                  axisLabel: {
                    // eslint-disable-next-line no-unused-vars
                    formatter: function (value, index) {
                      return value + 'MHz'
                    },
                  },
                },
                yAxis: {
                  type: 'value',
                },
                series: [
                  {
                    name: '场强',
                    type: 'line',
                    data: y,
                  },
                ],
                dataZoom: [
                  {   // 这个dataZoom组件，默认控制x轴。
                    type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
                    start: 0,      // 左边在 10% 的位置。
                    end: 100         // 右边在 60% 的位置。
                  }
                ],
              }
              myChart.hideLoading()
              myChart.setOption(this.orgOptions)

              let scatterData = []
              for (let index in x) {
                // console.log(index)
                let item = []
                item.push(x[index])
                item.push(y[index])
                scatterData.push(item)
              }

              let maxVal = Math.max.apply(null, y)
              let minVal = Math.min.apply(null, y)

              this.scatterOptions = {
                title: {
                  text: '',
                  left: 'center',
                  top: 0,
                },
                visualMap: {
                  min: minVal,
                  max: maxVal,
                  dimension: 1,
                  orient: 'vertical',
                  right: 10,
                  top: 'center',
                  text: ['强', '弱'],
                  calculable: true,
                  inRange: {
                    color: ['#f2c31a', '#24b7f2'],
                  },
                },
                tooltip: {
                  trigger: 'item',
                  axisPointer: {
                    type: 'cross',
                  },
                },
                xAxis: [
                  {
                    type: 'value',
                    axisLabel: {
                      formatter: function (value, index) {
                        return value + 'MHz'
                      },
                    },
                  },
                ],
                yAxis: [
                  {
                    type: 'value',
                  },
                ],
                series: [
                  {
                    name: '场强',
                    type: 'scatter',
                    symbolSize: 5,
                    // itemStyle: {
                    //     normal: {
                    //         borderWidth: 0.2,
                    //         borderColor: '#fff'
                    //     }
                    // },
                    data: scatterData,
                  },
                ],
                dataZoom: [
                  {   // 这个dataZoom组件，默认控制x轴。
                    type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
                    start: 0,      // 左边在 10% 的位置。
                    end: 100         // 右边在 60% 的位置。
                  }
                ],
              }
              let scatterChart = this.$echarts.init(
                document.getElementById('scatter')
              )
              scatterChart.setOption(this.scatterOptions)
            } else {
              console.log(`get data for ${deviceId} failed`)
            }
          }.bind(this)
        )
    },
  },
}
// eslint-disable-next-line no-unused-vars
function onRecords (_data) {
  // eslint-disable-next-line no-unused-vars
  let { measure_dt, traces, remarks } = _data
  console.log(JSON.stringify(remarks))
  // eslint-disable-next-line no-unused-vars
  let { frequency, span, unit, ref, mr } = remarks
  let startFreq = frequency - span / 2
  let trace = traces[0].trace
  let pointCount = trace.length

  let step = span / pointCount
  console.log(`step ${step}`)
  let freqPoint = []
  for (let i = 0; i < pointCount; i++) {
    freqPoint.push(parseInt((startFreq + i * step) / 1000000))
  }
  return [freqPoint, trace, remarks]
}
</script>

<style scoped>
.right-condition {
  margin-top: 4rem;
}
</style>
